import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Radio, Row, Col, Card, Space, Button } from 'antd';
import { order_status, goodsType_status, operation_statusinfo, marketing_type, workType_status, } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import CardMask from './components/CardMask'
import OrderForm from './OrderForm';
import { useUpdateEffect } from 'ahooks';
import { } from '@/common/contact'
import Indentation from '@/components/Indentation'
import SaleTypeModel from './components/SaleTypeModel';
import ModelForm from './components/ModelForm'
import moment from 'moment'
const OrderList = (props) => {
  const { loading, dispatch, list, history } =
    props;
  const { location } = history;
  const { query } = location;
  const { openType, accessId, type } = query
  const childRef = useRef();
  const [visible, setVisible] = useState(false);
  const [active, setActive] = useState('')
  const [orderVisible, setOrderVisible] = useState({ show: openType === 'user' ? true : false, detail: { ...query } })
  const [organizationAuthAdminList, setOrganizationAuthAdminList] = useState([])
  const [saleVisible, setSaleVisible] = useState(false)
  const [modelFormVisible, setModelFormVisible] = useState(false)
  const [showRender, setShowRender] = useState(false)
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  useUpdateEffect(() => {
    handleCallback()
  }, [active])
  useEffect(() => {

    if (type === 'reload') {
      reloadPlay(query)
    }
    else {
      setShowRender(true)
    }
  }, []);
  const { show } = orderVisible
  const filterList = (list) => {
    return list.map((item) => {
      const { departmentName: label, qywxDepartmentId: value, subDepartmentList: children } = item;
      const localItem = {
        label,
        value,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const onChange = (e) => {
    setActive(e.target.value);
  };
  const searchItems = [
    {
      label: '用户姓名或手机',
      name: 'keyword',

    },
    {
      label: '订单编号',
      name: 'orderSn',
    },
    {
      label: '订单类型',
      name: 'orderType',
      type: 'select',
      select: goodsType_status,
    },
    {
      label: '审核状态',
      name: 'operationStatus',
      type: 'select',
      select: operation_statusinfo,
    },
    {
      label: '营销类型',
      name: 'marketingType',
      type: 'select',
      select: marketing_type,
    },
    {
      label: '实付金额:',
      selectKey: ['minPayFee', 'maxPayFee'],
      type: 'numberGroup',
    },
    {
      label: '商品名称',
      name: 'goodsName',
    },
    {
      label: '创建时间',
      type: 'rangePicker',
      name: 'createStartTime',
      end: 'createEndTime',
    },

    {
      label: '创建人',
      name: 'enterAdminId',
      fieldNames: { label: 'username', value: 'id' },
      type: 'user',
    },
  ];
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '手机',
      dataIndex: 'mobile',
    },
    {
      title: '订单时间',
      dataIndex: 'createTime',
    },
    {
      title: '订单信息',
      dataIndex: 'orderDesc',
      render: (e) => {
        const goods = e ? JSON.parse(e) : {}
        const { goodsCover, goodsName } = goods
        return <Indentation str={goodsName}></Indentation>
      }
    },
    {
      title: '订单编号',
      dataIndex: 'orderSn',
    },
    {
      title: '订单类型',
      dataIndex: 'orderType',
      render: (e) => {
        return goodsType_status[e]
      },
    },
    {
      title: '创建人',
      dataIndex: 'addAdminName',
    },
    {
      title: '服务类型',
      dataIndex: 'workType',
      render: (e) => {
        return workType_status[e]
      }
    },
    {
      title: '应收',
      dataIndex: 'payFee',
    }, {
      title: '实收',
      dataIndex: 'realPayFee',
    },
    {
      title: '欠费',
      dataIndex: 'remainMoney',
    },
    {
      title: '运费',
      dataIndex: 'expressPrice',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return order_status[e]
      },
    },
    {
      title: '商品数量',
      dataIndex: 'goodsAmount',
    },
    {
      title: '支付时间',
      dataIndex: 'payTime',
    },
    {
      title: '复核人',
      dataIndex: 'checkAdminName',
    },
    {
      title: '复核时间',
      dataIndex: 'checkTime',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '详情',
          click: () => {
            history.push({
              pathname: '/order/orderDetails',
              query: {
                orderSn: record.orderSn,
                accessId,
                linkType: 'user'
              }
            })
          },
        },
      ],
    },
  ];
  const TabList = [{
    label: '全部',
    key: '',
  },
  {
    label: '已支付',
    key: '1',
  },
  {
    label: '已完成',
    key: '3',
  },
  {
    label: '待支付',
    key: '0',
  },
  {
    label: '已关闭',
    key: '2',
  },
  ]
  const reloadPlay = (record) => {
    dispatch({
      type: 'order/fetchOrderDetail',
      payload: {
        orderSn: record.orderSn,

      },
      callback: (e, val) => {
        const { payTime, orderDate } = e
        const {
          goodsInfo = {} } = val
        setShowRender(() => {
          setOrderVisible({ show: true, type: 'reload', detail: { ...e, goodsInfo: goodsInfo, payTime: moment(payTime, 'YYYY-MM-DD HH:mm'), orderDate: moment(orderDate, 'YYYY-MM-DD') } })
          return true
        })

      }

    })
  }
  const fetchOrderDetail = (orderSn) => {
    dispatch({
      type: 'order/fetchOrderDetail',
      payload: {
        orderSn: orderSn,
        preCommissionFlag: '1',
        commissionFlag: '1'
      },
      callback: (e, record) => {
        setVisible({ show: true, detail: record })
      }
    });
  }
  if (!showRender) {
    return null
  }
  else {
    if (!show) {
      return (
        <Card extra={<Button type='link' onClick={() => setOrderVisible({ show: true })}>录入订单 </Button>} title='我的订单'>
          <Row gutter={[0, 12]}>
            <Col span={24}>
              <Radio.Group
                value={active}
                onChange={onChange}
                style={{
                  marginBottom: 16,
                }}
              >
                {TabList.map((item, index) => {
                  return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
                })}
              </Radio.Group>
            </Col>
            <Col span={24}>
              <TableDataBlock
                params={{ status: active }}
                cRef={childRef}
                loading={loading}
                searchItems={searchItems}
                columns={getColumns}
                rowKey={(record) => `${record.orderSn}`}
                dispatchType="order/fetchListMyOrder"
                {...list}
              ></TableDataBlock>
            </Col>

            <CardMask visible={visible} onClose={() => setVisible(false)}></CardMask>
          </Row>
          <SaleTypeModel visible={saleVisible} onClose={() => setSaleVisible(false)}></SaleTypeModel>
          <ModelForm handleCallback={handleCallback} visible={modelFormVisible} onClose={() => { setModelFormVisible(false) }}></ModelForm>
        </Card>
      );
    }
    else {
      return <OrderForm handleCallback={handleCallback} visible={orderVisible} onClose={() => setOrderVisible({
        show: false
      })}></OrderForm>
    }
  }


};

export default connect(({ order, loading }) => ({
  list: order.myOrderList,
  loading: loading.models.order,
}))(OrderList);
